<template>
    <div>
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            @closed="close"
            :close-on-click-modal="false"
            @open="open"
            width="600px">
            <div v-loading="loading">
                <el-row>
                    <el-col :span="8">
                        <el-upload
                        class="avatar-uploader"
                        :action="baseurl"
                        :http-request="uploadFilesHandler"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload">
                            <img v-if="formdata.bT_Photo" :src="formdata.bT_Photo" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>
                    <el-col :span="16">
                        <el-form :model="formdata" label-width="120px" ref="addform"  :rules="rules">
                            <el-form-item label="姓名：" prop="bT_Name">
                                <el-input type="text" v-model.trim="formdata.bT_Name" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="用户名：" prop="bbT_Mobile">
                                <el-input type="text" v-model.trim="formdata.bbT_Mobile" placeholder="请输入用户名"></el-input>
                            </el-form-item> -->
                            <el-form-item label="联系电话：" prop="bT_Mobile">
                                <el-input type="text" v-model.trim="formdata.bT_Mobile" placeholder="请输入联系电话"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="bT_PassWord">
                                <el-input type="text" style="display:none;" ></el-input>
                                <el-input type="text" v-model.trim="formdata.bT_PassWord" :placeholder="placeholder"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="t-r">
                    <el-button type="primary" @click="save">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {addteacher,editteacher,baseurl,upLoadFiles} from '@/api/index.js'
import {passWord,validateContent} from '@/common/js/validate.js'
export default {
    data() {
        return {
            dialogVisible:false,
            baseurl:baseurl + '/UploadPhoto',
            formdata:{
                bT_Name:'',
                bT_Mobile:'',
                bT_PassWord:'',
                bT_Photo:''
            },
            rules: {
                bT_Name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                bT_Mobile: [
                    { required: true, message: '联系电话不能为空', trigger: 'blur' },
                    { validator: validateContent, trigger: 'blur' }
                ],
                bT_PassWord: [
                    ...passWord
                ]
            },
            loading:false,
            imageUrl:'',
            placeholder:'请输入密码'
        }
    },
    props:{
        title:{
            type:String,
            default:'新增教师'
        },
        eidtinfo:{
            type:null
        }
    },
    methods:{
        save(){
            this.$refs.addform.validate((valid) => {
                if (valid) {
                    if(this.eidtinfo) {
                        editteacher({...this.formdata,bTID:this.eidtinfo.TID}).then((res) => {
                            if(res) {
                                if(res.code == 200) {
                                    this.$util.tipsMsg('success','修改成功！');
                                    this.dialogVisible = false;
                                    this.$emit('addsuccess',true);
                                } else {
                                    this.$util.tipsMsg('error',res.message);
                                }
                            }
                        }).catch((err) => {

                        })
                    } else {
                        if(!this.formdata.bT_PassWord) {
                            this.$util.tipsMsg('error','新增时密码不能为空！');
                            return false;
                        }
                        addteacher(this.formdata).then((res) => {
                            if(res) {
                                if(res.code == 200) {
                                    this.$util.tipsMsg('success','添加成功！');
                                    this.dialogVisible = false;
                                    this.$emit('addsuccess',true);
                                } else {
                                    this.$util.tipsMsg('error',res.message);
                                }
                            }
                        }).catch((err) => {

                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
            
        },
        open(){
            this.placeholder = '请输入密码';
            this.$nextTick(() =>{
                if(this.eidtinfo) {
                    this.formdata.bT_Name = this.eidtinfo.T_Name;
                    this.formdata.bT_Mobile = this.eidtinfo.T_Mobile;
                    this.formdata.bT_Photo = this.eidtinfo.T_Photo;
                    this.formdata.bT_PassWord = '';
                    this.placeholder = '密码为空时则不修改密码！';
                }
            })
        },
        uploadFilesHandler(options){;
            let file = options.file
            let filename = options.file.name;
            let type = options.file.type;
            if (file) {
                var ready = new FileReader();
                ready.readAsDataURL(file);
                ready.onload = (fileReader) => {
                    let base64Str = fileReader.currentTarget.result;
                    this.loading = true
                    upLoadFiles({filebytes:base64Str,bExt:type}).then((res) => {;
                        if(res.code == 200) {
                            this.formdata.bT_Photo = res.FileName;
                        } else {
                            this.$message.error(res.message);
                        }
                    }).finally (() => {
                        this.loading = false;
                    })
                
                }
            }
        },
        
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 、PNG格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        close(){
            this.loading = false;
            this.$refs.addform.resetFields();
        }
    }
}
</script>
<style lang="less">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
